<template>
	<view class="result_box">
		<view class="top">
			<view class="title">
				<text class="big">保守型</text>
				<view class="time">有效期至: 2022-03-01</view>
			</view>
			<view class="rote">
				<view class="model">
					<text class="txt">风险承受能力</text>
					<view class="tiao_box">
						<text class="xi active"></text>
						<text class="xi active"></text>
						<text class="xi active"></text>
						<text class="xi"></text>
						<text class="xi"></text>
					</view>
				</view>
				<view class="model">
					<text class="txt">期望投资收益</text>
					<view class="tiao_box">
						<text class="xi active"></text>
						<text class="xi active"></text>
						<text class="xi"></text>
						<text class="xi"></text>
						<text class="xi"></text>
					</view>
				</view>
			</view>
			<view class="remind">您的风险承受能力较低， 适合投资低风险、中低风险产品;  除此之外的中风险、 中高风险、 高风险产品超出了您的风险承受能力，请谨慎选择</view>
		</view>
		<view class="bottom">
			<view class="radio_box">
					<image  @click="setChoose" class="radio" :src="checked?'../../../../static/funds/dan_select.png':'../../../../static/funds/dan.png'"></image>
				<view class="txt">我已了解:我是保守型的投资者，本产品为低风险符合我的风险承受能力</view>
			</view>
			<view class="go_pay" @tap="goInformation">继续购买</view>
			<view class="no_pay" @tap="nobuy">暂不购买</view>
		</view>
	</view>
</template>

<script>
	export default { 
		data() {
			return {
				
			}
		},
		computed:{
			checked(){
				console.log(this.$store.state.chooseFx);
				return this.$store.state.chooseFx;
			}
		},
		methods: {
			nobuy(){
				uni.navigateTo({
					url:"../details/details" 
				})
			},
			goInformation(){
				if(this.$store.state.chooseFx){
					uni.navigateTo({
						url:"../information/information",
					})
				}else{
					uni.showToast({
					    title: '请确认了解',
					    duration: 1000,
						icon:"error"
					});
				}
			},
			setChoose(){
				this.$store.commit("CHANG_CHOOSEFX",!this.$store.state.chooseFx)	
			}
		}
	}
</script>

<style scoped lang="scss">
	.result_box{
		width: 750rpx;
		height: 100vh;
		background-color: #f5f5f5;
		.top{
			height: 640rpx;
			background-color: white;
			box-sizing: border-box;
			padding-left: 42rpx;
			padding-right: 42rpx;
			.title{
				padding-top: 65rpx;
				height: 240rpx;
				box-sizing: border-box;
				text-align: center;
				border-bottom: 1rpx solid #f9f9f9;
				.big{
					font-size: 60rpx;
					color: #333333;
					margin-bottom: 16rpx;
					font-weight: bold;
				}
				.time{
					font-size: 28rpx;
					color: #666666;
				}
			}
			.rote{
				height: 220rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				border-bottom: 1rpx solid #f9f9f9;
				.model{
					height: 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.txt{
						font-size: 24rpx;
						color: #666666;
					}
					.tiao_box{
						height: 30rpx;
						display: flex;
						align-items: center;
						.xi{
							display: inline-block;
							width: 58rpx;
							height: 2rpx;
							background-color: #cfcfcf;
							margin-right: 2rpx;
						}
						.active{
							background-color: $uni-global-color-theme;
						}
					}
				}
			}
			.remind{
				height: 250rpx; 
				box-sizing: border-box;
				padding-top: 30rpx;
				font-size: 24rpx;
				color: #666666;
				padding-right: 20rpx;
				line-height: 40rpx;
			}
		}
		.bottom{
			box-sizing: border-box;
			padding-left: 42rpx;
			padding-right: 42rpx;
			padding-top: 40rpx;
			.radio_box{
				display: flex;
				justify-content: space-between;
				height: 60rpx;
				.radio{
					width: 32rpx;
					height: 32rpx;
					margin-top: 8rpx;
					margin-right: 10rpx;
				}
				.txt{
					font-size: 24rpx;
					color:#999999;
					padding-right: 20rpx;
					box-sizing: border-box;
					
				}
			}
			.go_pay{
				height: 86rpx;
				background-color: $uni-global-color-theme;
				text-align: center;
				line-height: 86rpx;
				color: white;
				font-size: 28rpx;
				border-radius: 8rpx;
				margin-top: 40rpx;
			}
			.no_pay{
				height: 86rpx;
				background-color: white;
				text-align: center;
				line-height: 86rpx;
				color: #333333;
				font-size: 28rpx;
				border-radius: 8rpx;
				margin-top: 40rpx;
			}
		}
	
	}

</style>
